<template>
	<view class="user-container">
		<view class="card">
			<view class="card_header">
				<view class="card_header-avatar">
					<image src="../../static/logo.png" mode="aspectFit" role="img" class="card_header-avatar-image">
					</image>
				</view>
				<view v-if="!isRegister" class="card_header-content">
					<text class="card_header-content-title" @click="goRegister()">注册</text>
					<text class="card_header-content-subtitle">会员等级</text>
				</view>
				<view v-else class="card_header-content">
					<text class="card_header-content-title">{{nickName}}</text>
					<text class="card_header-content-subtitle">会员积分</text>
				</view>
				<view v-if="!isRegister" class="card_header-extra">
					<text class="card_header-extra-text">会员积分</text>
				</view>
				<view v-else class="card_header-extra">
					<text class="card_header-extra-text">{{point}}</text>
				</view>
			</view>
		</view>
		<view class="uni-margin-wrap">
					<swiper class="swipers" circular :indicator-dots="true" :autoplay="true" :interval="2000"
						:duration="1000"  >
						<swiper-item>
							<view class="swiper-item uni-bg-red">
								<image class="swiper" src="https://img95.699pic.com/photo/40193/4832.jpg_wh300.jpg!/fh/300/quality/90"></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-green">
								<image class="swiper" src="https://p2.ssl.qhimgs1.com/t014c02bdafa24604a2.jpg" @click="goLotteryDraw()"></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-blue">
								<image class="swiper" src="https://img.js.design/assets/img/6495334eb8adfe517251163e.jpg#bfd9721c119bb39ecdc0d677cffb96ea" @click="goStore()"></image>
							</view>
						</swiper-item>
					</swiper>
		</view>
		<view class="waibu">
			<view class="neibu">
			<text class="text_point">积分活动</text>
			<image class="lottery"  @click="goLotteryDraw()" src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fa3e25a7e3f031021cdb9/6492a3f854fe0000116aba07/16873406631736241157.png" ></image>
			<image class="pointstore" @click="goStore()" src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fa3e25a7e3f031021cdb9/6492a3f854fe0000116aba07/16873419745209094908.png"></image>
			</view>
		</view>
		<view class="nav">
			<view class="nav-item">
				<text class="my">我的项目</text>
					<view class="both">
						<view class="item_both">
							<image class="image_both" src="../../static/person.png" @click="ToUserInf()"></image> 
						</view>
						<view class="item_both">
							<image class="image_both" src="../../static/jilu.png" @click="ToRecord()"></image>
						</view>

						<view class="item_both">
							<image class="image_both" src="../../static/activity.png"@click="goRegular()"></image>
						</view>
						
						<view class="item_both">
							<image class="image_both" src="../../static/address.png" @click="goRelation()"></image>
						</view>
						
					</view>	
					<view class="both_next">
						<text class="text_both" @click="ToUserInf()">个人信息</text>
						<text class="text_both" @click="ToRecord()">积分变更记录</text>
						<text class="text_both" @click="goRegular()">规则详情说明</text>
						<text class="text_both" @click="goRelation()">联系我们</text>
					</view>
			</view>
		</view>
		<view class="other">
			<text class="more">更多>></text>
			<view class="other_nei">
				<view class="other_box">
					<image class="other_img" src="../../static/order.png" @click="goOrderList()"></image>
					<text class="other_text" @click="goOrderList()">我的订单</text>
				</view>
				<view class="other_box">
					<image class="other_img" src="../../static/quan.png"></image>
					<text class="other_text">电子券</text>
				</view>
				<view class="other_box">
					<image class="other_img" src="../../static/feedback.png"></image>
					<text class="other_text">用户反馈</text>
				</view>
			</view>
		</view>
		<footer class="footer">
			<p>&copy; 2023. All rights reserved.</p>
		</footer>
	</view>
	
</template>

<script>
	import {
		memberGet
	} from '../../api/index.js'//引入会员详情查询接口
	 const miniProgramAppid = 'wx95df8d135409ab43';
	 const secret = 'ce525ecb58eebf4aa11170b7bd3a3839';
	
	export default {
		data() {
			return {
				openid: '',
				code: '',
				nickName: '',
				gainedPoint: '',
				point:'',
				isRegister: false
			}
		},
		methods: {
			//1. 获取openid
			// 获取微信登录的授权码code
			wxLogin(e) {
				uni.login({
					provider: "weixin",
					success: (res) => {
						console.log(res);
						this.code = res.code;
						// 发送request请求，获取openid和session_key
						uni.request({
							url: 'https://api.weixin.qq.com/sns/jscode2session',
							method: 'GET',
							data: {
								'appid': miniProgramAppid,
								'secret': secret,
								'js_code': this.code,
								'grant_type': 'authorization_code'
							},
							success: (res) => {
								console.log(res.data);
								this.openid = res.data.openid;
								this.get();
								uni.setStorageSync('openid', this.openid);
								
							}
						})
					}
				})
			},
			//2. 查询会员是否注册
			get() {
				uni.showLoading({
					title: '加载中...'
				});
				memberGet({
					"data":{
						"appId": miniProgramAppid,
						"openId": this.openid
					}
				})
				.then(res => {
						uni.hideLoading();
						this.isRegister = true;
						// this.nickName = res.data.data.nickname;//nickname为空
						this.nickName=res.data.data.name;
						this.gainedPoint = res.data.data.gainedPoint;
						this.point=res.data.data.point;
						uni.setStorageSync("memberId",res.data.data.memberId)
						uni.setStorageSync('point', this.point);//存储point
						uni.setStorageSync('nickName', this.nickName);
						console.log(this.point);
						// uni.showToast({
						// 	title: '登陆成功',
						// 	icon: 'success',
						// 	duration: 2000
						// })
				})
				.catch(res => {
						uni.showToast({
							title: '请先注册',
							icon: 'none',
							duration: 2000
						})
				})
			},
			goStore() {
				uni.switchTab({
					url: '/pages/pointsMall/pointsMall'
				})
			},
			goLotteryDraw() {
				uni.switchTab({
					url: '/pages/test/test'
				})
			},
			goRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			goRegular() {
				uni.navigateTo({
					url: '/pages/regular/regular'
				})
			},
			goOrderList() {
				uni.navigateTo({
					url: '/pages/orderlist/orderlist'
				})
			},
			goRelation() {
				uni.navigateTo({
					url: '/pages/relation/relation'
				})
			},
			onShow() {
				this.wxLogin()
			},
			ToUserInf(){
				uni.navigateTo({
					url:"/pages/editUser/userInf"
				})
			},
			ToRecord(){
				uni.navigateTo({
					url:"/pages/searchRecord/searchRecord"
				})
			}
		}
	}
</script>

<style lang="scss">
	.user-container {
		overflow: hidden;
		font-family: HYQihei 40S;
		background-image: linear-gradient(343.2deg, #b0de7829 33%, #e6454599 70.3%);
		overflow: hidden;
		.card {
			margin: 15px;
			padding: 0 10px;
			box-shadow: 0px 0px 3px 1px #ffffff;
			border: 1px solid #EBEEF5;
			background-color: rgba(255, 209, 205, 1);
			border-radius: 10px;

			.card_header {
				display: flex;
				border-bottom: 1px  solid #EBEEF5;
				flex-direction: row;
				align-items: center;
				padding: 10px;
				overflow: hidden;

				.card_header-avatar {
					width: 40px;
					height: 40px;
					overflow: hidden;
					border-radius: 5px;
					margin-right: 10px;

					.card_header-avatar-image {
						flex: 1;
						width: 40px;
						height: 40px;
					}
				}

				.card_header-content {
					display: flex;
					flex-direction: column;
					justify-content: center;
					flex: 1;
					overflow: hidden;

					.card_header-content-title {
						padding: 10px 0px 10px 10px;
						font-size: 15px;
						color: #3a3a3a;
					}

					.card_header-content-subtitle {
						padding: 0px 0px 0px 10px;
						font-size: 12px;
						margin-top: 5px;
						color: #909399;
					}
				}

				.card_header-extra {
					font-size: 12px;
					color: #909399;
				}
			}
		}
		.uni-margin-wrap {
			margin: 6rpx 35rpx 20rpx 35rpx;
			box-shadow: 1px 2px 2px 3px #f8baba;
			border-radius: 10px;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			.swiper {
				width: 100%;
				height: 300rpx;
				
			}
		}
		.waibu {
			 margin: 15px;
			 padding: 0 10px;
			 box-shadow: 1px 2px 2px 3px #f8baba;
			 border: 1px solid #EBEEF5;
			 height: 300rpx;
			 border-radius: 10px;
			 overflow: hidden;
			 background-color: #ffffff;
			  .neibu {
				.text_point{
					color: #B50E03;
					display: block;
					padding-top: 4rpx;
				}
				.lottery {
						align-items: center;
						justify-content: center;
						margin: 15rpx 30rpx 0rpx 0rpx;
						margin-left: 30rpx;
						width: 350rpx;
						height: 220rpx;
						flex-shrink: 0;
						border-radius: 10px;
						overflow: hidden;
						
									
				}
				.pointstore {
						margin: 15rpx 20rpx 0rpx 0rpx;
						align-items: center;
						justify-content: center;
						position: absolute;
						margin-right: 70rpx;
						border-radius: 10px;
						overflow: hidden;
						right: 3rpx;
						width: 350rpx;
						height: 220rpx;
						flex-shrink: 0;
				}  
			  }
			  
		}
		.nav {
			margin: 15px;
			padding: 0 10px;
			box-shadow: 1px 2px 2px 3px #f8baba;
			border: 1px solid #EBEEF5;
			height: 210rpx;
			border-radius: 10px;
			overflow: hidden;
			background-color: #ffffff;
			.my {
				color: #B50E03;
				display: block;
				padding-top: 4rpx;
			}	
			.both{	
				margin-left: 22rpx;
				width: 600rpx;
				height: 120rpx;
				justify-content: space-between;
				display: flex;
				flex-direction: row;
				background-color:#ffffff;
				border-radius: 10px;
			
				.item_both {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					padding: 10rpx 0;
					border-radius: 50%;
					background-color: #ffffff;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					box-shadow: 2px 2px 2px 2px #e6454599;
					width: 120rpx;
					height: 120rpx;
					.image_both {
						width: 100rpx;
						height: 100rpx;
						
					  }
					
				}
			}
			.both_next {
				width: 600rpx;
				height: 30rpx;
				justify-content: space-between;
				display: flex;
				flex-direction: row;
				background-color:#ffffff;
				border-radius: 10px;
				padding: 0rpx;
				margin-left: 22rpx;
				font-size: 12px;
				color: #de2811;
				
			}
			
		}
		.other {
			margin: 15px;
			padding: 0 10px;
			box-shadow: 1px 2px 2px 3px #f8baba;
			border: 1px solid #EBEEF5;
			height: 430rpx;
			border-radius: 10px;
			overflow: hidden;
			background-color: #ffffff;
			.more {
				color: #B50E03;
				display: block;
				padding-top: 4rpx;
			}
			.other_nei {
				margin-left: 12rpx;
				margin-right: 12rpx;
				width: 625rpx;
				height: 350rpx;
				justify-content: center;
				display: flex;
				flex-direction: column;
				background-color:#ffffff;
				box-shadow: 1px 2px 3px 4px #e6454599;
				border-radius: 6px;
				.other_box {
					margin-left: 12rpx;
					margin: 6rpx;
					width: 610rpx;
					height: 100rpx;
					background-color:#ffffff;
					border-radius: 8px;
					diaplay:flex;
					flex-direction: raw;
					align-items: center;
					box-shadow: 0px 1px 0px 1px #e6454599;
					overflow: hidden;
					.other_img {
						margin-left: 18rpx;
						margin-top: 12rpx;
						width: 70rpx;
						height: 70rpx;
					}
					.other_text {
						position: absolute;
						align-items: center;
						margin-top: 30rpx;
						margin-left: 10rpx;
						font-size: 28rpx;
						color: #4b5563;
					}
				}
			}
			
		}
		.footer {
			text-align: center;
			padding: 20rpx 0;
			font-size: 14rpx;
		}
	}
</style>